<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var uid =parseInt(Math.random()*10000);
        var url ="ws://localhost:9875";
        var ws =new WebSocket(url+"?uid="+uid);
        ws.onopen = function (event) {
            console.log("opened");
            ws.send("Hello Tio WebSocket");
        }
        ws.onmessage=function (p1) {
            appendHtml( document.getElementById('container'),'<li>'+p1.data+'</li>');
        }
        function send() {
            ws.send(document.getElementById('txtInput').value);
        }

        function appendHtml(elem,value){
            var node = document.createElement("div"),
                fragment = document.createDocumentFragment(),
                childs = null,
                i = 0;
            node.innerHTML = value;
            childs = node.childNodes;
            for( ; i < childs.length; i++){
                fragment.appendChild(childs[i]);
            }
            elem.appendChild(fragment);
            childs = null;
            fragment = null;
            node = null;
        }
    </script>
</head>
<body>

<div>
    <ul id="container">

    </ul>

    <input type="text"  id="txtInput"/>
    <input type="button" value="发言" onclick="send()">
</div>
</body>
</html>